/*
  学习目标：性能优化
  1. 减轻state的设计
  2. 使用shouldComponentUpdate避免无效更新
  
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
        <Footer></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  // 可以理解为更新前
  // 通过返回值, 决定组件本身是否更新
  shouldComponentUpdate() {
    // 表示更新
    // return true;
    // 表示不更新
    return false;
  }

  // 更新中
  render() {
    console.log('我被更新过了  ----->  ');
    return <div>我是Footer, 我是写死的内容</div>;
  }

  // 更新后
  componentDidUpdate() {
    console.log('componentDidUpdate 更新完毕  ----->  ');
  }
}
